<template>
    <div>
    <yin-table :columns="columns" :data="data">
        <h3 slot="title">待办列表</h3>
        <template v-slot:status="scope">
            <span v-if="scope.row.state === 'new'" style="color: red;">{{scope.row.state}}</span>
            <span v-else style="color: green;">{{scope.row.state}}</span>
        </template>
        <template v-slot:conduct="scope">
            <button @click="optEvt(scope)">处理</button>
            <button @click="del(scope)">删除</button>
        </template>
    </yin-table>
    </div>
</template>

<script>
    import YinTable from './YinTable.vue'
    export default {
        components: { YinTable },
        data() {
            return {
                columns: [
                    {key: 'title', title: '标题'},
                    {key: 'name', title: '姓名'},
                    {key: 'time', title: '时间'},
                    {key: 'state', slot:'status', title: '状态'},
                    {key: 'opt', slot:'conduct', title: '处理'},
                ],
                data:[]
            }
        },

        async created() {
            let result = await this.ajax()
            this.data = result.map(it => {
                it.key = it.id
                return it
            })
        },

        methods: {
            ajax() {
                return new Promise((resolve, reject) => {
                    let list = Array(10).fill('').map((_, i) => {
                        return {id: 'id' + i, title: '解决bug' + i,name: '王' + i + '小', time: '2021-12-02',state: 'new'}
                    })
                    resolve(list)
                })
            },
            optEvt(props) {
                this.data.map(it =>{
                    if(it.id === props.row.id) it.state = it.state ==='new' ? 'finsh' : 'new'
                })
            },
            del(props){
                let index = this.data.findIndex((it) => it.id === props.row.id)
                // console.log(index)
                this.data.splice(index,1)
                console.log(this.data)
            }
        }


    }
</script>